<template lang="html">
<div class="home-container">
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col :span="10" class="logo" :class="'logo-width'">
        <el-col class="logo-img"></el-col>
        <el-col class="logo-title">{{sysName}}</el-col>
      </el-col>
      <el-col :span="1" class="fold">
        <i class="el-icon-s-fold" v-if="1"></i>
        <i class="el-icon-s-unfold" v-else></i>
      </el-col>
      <el-col :span="5" class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-inner">
          <el-breadcrumb-item v-for="item in $route.matched" :key="item.path" @click="onToPath(item.path)">{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="4" class="userinfo">
        <i class="el-icon-message-solid" @click="goExport()"></i>
        <el-dropdown trigger="hover">
          <span class="el-dropdown-link userinfo-inner">您好：{{sysUserName}}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="onToHome">首頁</el-dropdown-item>
            <el-dropdown-item @click.native="onToPwd" v-if="type !== 4">修改密碼</el-dropdown-item>
            <el-dropdown-item divided @click.native="logoutFun">退出登錄</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <aside :class="'menu-expanded'" v-if="$route.name !== 'mapIndex'">
        <!--导航菜单-->
       <el-menu :default-active="$route.path" ref="bigmenu" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" unique-opened router>
         <template v-for="(item,index) in $router.options.routes" v-if="item.hiddenType && item.excludeType !== type && (item.hiddenType === type || item.hiddenType === 5 || item.otherType === type) && checkContains(item.meta.title)">
           <el-submenu :index="index+''" v-if="!item.single">
             <template slot="title"><i :class="item.iconCls"></i>{{  item.meta.title }}</template>
             <el-menu-item
               v-for="child in item.children"
               @click="addRouter(child, item.path +'/'+ child.path)"
               :index="item.path +'/'+ child.path"
               :key="item.path +'/'+ child.path"
               v-if="!child.hiddenType && child.excludeType !== type || (child.hiddenType === type || child.hiddenType === 5) && checkContains(child.meta.title)"
             >{{ child.meta.title }}</el-menu-item>
           </el-submenu>
           <el-menu-item
            v-else
            v-for="child in item.children"
            :index="child.path"
            :key="child.path"
            :to="child.path"
            @click="addRouter(child, item.path +'/'+ child.path, true)"
          >
            <i :class="item.iconCls"></i>
            {{ child.meta.title }}
          </el-menu-item>
        </template>
       </el-menu>
     </aside>
     <section class="content-container">
       <div class="grid-content bg-purple-light">
         <el-row class="nav-tabs">
          <el-col :span="24">
            <div @click="changeRouter(index)" v-for="(option, index) in arry" class="cus-tab-box" :class="activepath==option.path?'activeTab':''">
              <span>{{ option.meta.title }}</span>
              <span @click.stop="arry.length!=1 && removeTab(index)"><i class="fa fa-times close-icon" aria-hidden="true"></i></span>
            </div>
          </el-col>
         </el-row>
         <el-col :span="24" class="content-wrapper">
           <transition name="fade" mode="out-in">
             <router-view></router-view>
           </transition>
         </el-col>
       </div>
     </section>
   </el-col>
 </el-row>
 <el-dialog
   title="告警消息"
   :visible.sync="msgVisible"
   :modal="false"
   center
   width="20%"
   :close-on-click-modal="false"
   :close-on-press-escape="false"
   :append-to-body="true"
   custom-class="dialog-msg"
   @closed="clearTimer">
   <span class="red">有{{ msgNum }}條新的告警消息</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click="onIgnore">忽略30分鐘</el-button>
     <el-button type="primary" @click="onToMsg">立即查看</el-button>
   </span>
 </el-dialog>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import * as types from '../store/mutation-types'
export default {
  name: 'home',

  data() {
    return {
      sysName: '鑒證系統',
      sysUserName: '',
      activepath: '',
      arry: [],
      treeArry: [],
      msgNum: 0,
      msgVisible: false,
      timer: ''
    }
  },

  computed: {
    ...mapState({
      userName: (state) => state.common.username,
      password: (state) => state.common.password,
      treeData: (state) => state.common.treeData,
      type: (state) => state.common.type,
      times: (state) => state.common.times
    }),

    nowTimes: {
      get() {
        return this.times;
      },
      set(val) {
        this.$store.dispatch("common/fetchTimes", val);
      },
    },
  },

  watch: {
    $route(to, from) {
      this.activepath = to.path
    }
  },

  created() {
    if(this.treeData.length) {
      this.checkTreeNode(this.treeData)
    }
    if (JSON.parse(sessionStorage.getItem('tabData'))) {
      this.arry = JSON.parse(sessionStorage.getItem('tabData'))
      this.activepath = this.$route.path
    } else {
      let obj = {}
      obj.path = this.$route.path
      obj.name = this.$route.name
      obj.meta = this.$route.meta
      this.activepath = this.$route.path
      this.arry.push(obj)
    }
    if (this.userName) {
      this.sysUserName = this.userName
    } else {
      this.sysUserName = 'admin'
    }
  },

  mounted() {
    var user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.sysUserName = this.$module === 'prove' ? ('鑒證員 ' + user.account) : user.account
    }

    this.timer = setInterval(()=>{
      this.nowTimes--
      if(this.nowTimes===0){
        this.countdown()
        this.nowTimes = 30
      }
    },1000)
  },

  beforeDestroy() {
    clearInterval(this.timer)
  },

  methods: {
    clearTimer() {
      clearInterval(this.timer)
    },

    countdown() {
      this.$store.dispatch('report/fetchAlarmList', { status: '', facilityNum: '', startTimeDate: '', endTimeDate: '', startTime: '', endTime: '' }).then(res => {
        // this.loading = false
        this.msgNum = res.result.filter(item => item.status === 0).length
        if(this.msgNum > 0) {
          this.msgVisible = true
        }
      }).catch(err => {
        // this.loading = false
        // this.$message.error(err)
        return false
      })
    },

    onToHome() {
      this.$router.push({ name: 'homeIndex' })
    },

    onToPwd() {
      this.$router.push({ name: 'changePwd' })
    },

    onToMsg() {
      this.$router.push({ name: 'reportIndex' })
      this.msgVisible = false
    },

    onIgnore() {
      this.nowTimes = 1800
      this.msgVisible = false
    },

    //退出登录
    logoutFun: function() {
      var _this = this
      this.$confirm('確認退出嗎?', '提示', {
        type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem('user')
          sessionStorage.removeItem('tabData')
          _this.$router.push({ name: 'Login' })
        })
        .catch(() => {})
    },

    // 往tab页添加router
    addRouter(data, path, flag) {
      const obj = Object.assign({}, data)
      obj.path = path
      let add = true
      for (let i = 0; i < this.arry.length; i++) {
        if (this.arry[i].path == obj.path) {
          add = false
        }
      }
      if (add) {
        this.arry.push(obj)
      }
      add = true
      sessionStorage.setItem('tabData', JSON.stringify(this.arry))
      if(flag) {
        this.$router.push({ path: path })
      }
    },

    // 操作tab
    changeRouter(index) {
      this.$router.push(this.arry[index].path)
    },

    onToPath(path) {
      console.log(path)
      this.$router.push({ path: path })
    },

    // 检查树结构是否包含当前节点
    checkContains(name) {
      return true
      //此处需要校验
      // return this.treeArry.includes(name)
    },

    // 遍历后台返回权限树节点数据
    checkTreeNode(tree) {
      for (var i = 0; i < tree.length; i++) {
        this.treeArry.push(tree[i].name)
        if (tree[i].child && tree[i].child.length > 0) {
          this.checkTreeNode(tree[i].child)
        }
      }
    },

    // remove Tab
    removeTab(index) {
      this.arry.splice(index, 1)
      if (index == 0) {
        this.$router.push(this.arry[0].path)
      } else {
        this.$router.push(this.arry[index - 1].path)
      }
      sessionStorage.setItem("tabData", JSON.stringify(this.arry))
    },

    //跳转至告警页面
    goExport() {
      this.$router.push({ name: 'reportIndex' })
    },

    ...mapMutations({
      setTabData: types.SET_TABDATA
    })
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/them.scss";
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  .header {
    height: 50px;
    line-height: 50px;
    background: $globalColor;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
      }
    }
    .logo {
      height: 50px;
      font-size: 22px;
      padding-left: 20px;
      border-color: $borderColor;
      border-right-width: 1px;
      border-right-style: solid;
    }
    .fold {
      text-align: right;
    }
    .logo-width {
      text-align: right;
      width: 180px;
      color: $baseColor;
      .logo-img {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-top: 5px;
        background-image: url("../assets/img/element-ui.svg");
        background-size: cover;
      }
      .logo-title {
        display: inline-block;
        line-height: 50px;
        width: 100px;
        height: 50px;
      }
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0 23px;
      width: 14px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    position: absolute;
    top: 50px;
    bottom: 0;
    overflow: hidden;
    aside {
      flex: 0 0 230px;
      width: 230px;
      .el-menu {
        height: 100%;
      }
      .collapsed {
        width: 60px;
        background: $globalColor;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      flex: 0 0 180px;
      width: 230px;
    }
    .content-container {
      flex: 1;
      overflow-y: scroll;
      padding: 20px;
      .nav-tabs {
        font-size: 12px;
        border-bottom: 1px solid #e4e7ed;
        .cus-tab-box {
          display: inline-block;
          margin: 5px 0px 5px 5px;
          padding: 3px 10px;
          border: 1px solid #ccc;
          border-radius: 2px;
          cursor: pointer;
        }
        .activeTab {
          background-color: $baseColor;
          color: #fff;
          border-color: #fff;
        }
        .close-icon {
          transform: rotate(0deg);
          transition: transform 1s;
        }
        .close-icon:hover {
          transform: rotate(180deg);
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
  .breadcrumb-container {
    margin-top: 20px;
    margin-left: 20px;
  }
}

.el-menu--inline {
  li.el-menu-item {
    padding: 0 !important;
  }
}

.el-dialog__wrapper {
  position: relative;
  z-index: 0;
}

/deep/.el-dialog {
  position: fixed;
  bottom: 0;
  right: 20px;
  margin: 10px;

  .el-dialog__body {
    text-align: center;
  }

  .red {
    color: $disconnectColor;
  }
}
</style>
